<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>document</title>
  <style type="text/css">
  *{margin: 0;padding: 0;}
  div{width:1000px;height:170px;margin:  150px auto;position: relative;overflow: hidden;}
  img{width: 125px;height: 170px;position: absolute;}
  </style>
  <script type="text/javascript">
    window.onload = function(){
      var Div = document.getElementsByTagName('div')[0];
      var Img = document.getElementsByTagName('img');
      function time(){
        var myTime = new Date();
        var Hours = myTime.getHours();
        var Min = myTime.getMinutes();
        var Sec = myTime.getSeconds();
        var str =  Two(Hours) +  Two(Min) + Two(Sec);
        Div.innerHTML = "<img src='image/" + str.charAt(0) + ".JPG'>" +  "<img src='image/" + str.charAt(1) + ".JPG'>" + "<img src='image/colon.JPG'>" + "<img src='image/" + str.charAt(2) + ".JPG'>" +  "<img src='image/" + str.charAt(3) + ".JPG'>" + "<img src='image/colon.JPG'>" + "<img src='image/" + str.charAt(4) + ".JPG'>" +  "<img src='image/" + str.charAt(5) + ".JPG'>" 
        for (var i = 0; i < Img.length; i++) {
          Img[i].style.left = 125 * i + 'px';
        };
      }
      time();
      setInterval(time,1000);
      function Two(n){
        return n < 10 ? '0' + n : '' + n;
      }
    }
  </script>
</head>
<body>
  <div></div>
</body>
</html>